<template>
	<!-- 添加定位容器和指针事件控制 -->
	<div class="drag-container" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave"
		@drop.prevent="handleDrop">
		<div class="upload-area" :class="{ 'is-dragging': isDragging }" @click="triggerUpload">
			<!-- 添加中间层保证事件触发 -->
			<div class="content-wrapper">
				<text class="upload-text">{{ uploadPrompt }}</text>
				<text class="upload-count" v-if="modelValue.length > 0">
					({{ modelValue.length }}/{{ maxCount }})
				</text>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
	modelValue: {
		type: Array,
		default: () => []
	},
	maxCount: {
		type: Number,
		default: 9
	},
	accept: {
		type: String,
		default: 'image/*,video/*'
	}
})

const emit = defineEmits(['update:modelValue', 'error', 'triggerUpload', 'handleFiles'])

const isDragging = ref(false)

const uploadPrompt = computed(() => {
	if (props.modelValue.length >= props.maxCount) return '已达上传上限'
	return props.modelValue.length > 0 ? '继续上传' : '点击或拖拽上传图片'
})

const triggerUpload = () => {
	if (props.modelValue.length >= props.maxCount) {
		emit('error', `最多上传 ${props.maxCount} 个文件`)
		return
	}
	emit('triggerUpload')
}

const handleDragOver = (e) => {
	console.log('handleDragOver')
	e.preventDefault()
	e.stopPropagation()
	isDragging.value = true
	if (e.dataTransfer) {
		e.dataTransfer.dropEffect = 'copy'
	}
}

const handleDragLeave = (e) => {
	console.log('leave')
	e.preventDefault()
	isDragging.value = false
}

const handleDrop = async (e) => {
	e.preventDefault()
	e.stopPropagation()
	isDragging.value = false

	if (!e.dataTransfer) {
		emit('error', '无效的拖拽操作')
		return
	}

	const files = []
	const items = e.dataTransfer.items

	if (items) {
		for (let i = 0; i < items.length; i++) {
			const item = items[i]
			if (item.kind === 'file') {
				const file = item.getAsFile()
				files.push(file)
			}
		}
	} else {
		files.push(...Array.from(e.dataTransfer.files || []))
	}

	if (files.length === 0) {
		emit('error', '未检测到有效文件')
		return
	}

	const remaining = props.maxCount - props.modelValue.length
	if (remaining <= 0) {
		emit('error', `最多上传 ${props.maxCount} 个文件`)
		return
	}

	emit('handleFiles', files.slice(0, remaining))
}
</script>

<style lang="scss" scoped>
/* 新增关键样式 */
.drag-container {
	position: relative;
	width: 100%;
	min-height: 300rpx;
	/* 保证最小可操作区域 */
}

.upload-area {
	border: 2rpx dashed #ddd;
	border-radius: 16rpx;
	padding: 40rpx;
	transition: all 0.3s;
	background: #f8f8f8;
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 关键样式：子元素穿透事件 */
.content-wrapper {
	pointer-events: none;
	/* 禁止子元素响应鼠标事件 */
	text-align: center;
}

/* 强化拖拽状态效果 */
.is-dragging {
	border-color: #409eff !important;
	background: rgba(64, 158, 255, 0.1) !important;
	transform: scale(1.02);
	box-shadow: 0 4rpx 20rpx rgba(64, 158, 255, 0.2);
}
</style>